@extends('admin.layouts.application')
@section('css')
    <style>
        .thumb{
            float:right;
            margin: 0;
            top: 0;
        }
        #img{
            max-height: 200px;
            position: relative;
            top: -50px;
        }
        *.am-icon-chevron-down{
            float: left;
            margin-right: 20px;
        }
        .task{
            display: inline;
        }
        .add_t{
            float: right;
        }
        .add_t a{
            color: #f8f8f8;
        }
    </style>
@endsection
@section('content')
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-g">
                <div class="am-u-md-12">
                    <div class="am-panel am-panel-default">
                        <div class="am-panel-hd am-cf ">客户基本信息
                            <div class="add_t" >
                                <button type="button" class="am-btn am-btn-secondary add_t doc-prompt-toggle" id="">新增任务</button>

                                <div class="am-modal am-modal-prompt my-prompt" tabindex="-1" id="">
                                    <div class="am-modal-dialog">
                                        <div class="am-modal-hd">新增任务信息</div>
                                        <div class="am-modal-bd">
                                            <form class="add_task">
                                            {!! csrf_field() !!}
                                            <div class="add"><p class="">标题</p><input type="text" class="am-modal-prompt-input " name="title" value=""/></div>
                                            <div class="add"><p class="">描述</p><input type="text" class="am-modal-prompt-input " name="description" value=""/></div>
                                                <input type="hidden"  name="customer_id" value="{{$customers->id}}"/>
                                            <div class="show">
                                                <div class="am-radio">
                                                    <label>
                                                        <input type="radio" name="ok" value="0" >
                                                        已完成
                                                    </label>
                                                </div>

                                                <div class="am-radio">
                                                    <label>
                                                        <input type="radio" name="ok" value="1" checked>
                                                        未完成
                                                    </label>
                                                </div>
                                            </div>
                                            </form>
                                        </div>
                                        <div class="am-modal-footer">
                                            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                                            <span class="am-modal-btn" data-am-modal-confirm>提交</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="am-panel-bd am-collapse am-in" id="collapse-panel-1">
                            <ul class="am-list admin-content-file">
                                <div><strong>客户ID: &nbsp; &nbsp; &nbsp; &nbsp;{{$customers->id}}</strong></div>
                                <div><strong>客户名:&nbsp; &nbsp; &nbsp; &nbsp;{{$customers->name}}</strong></div>
                                <div class="thumb"><img src="{{$customers->thumb}}" alt="..." id="img" class="am-img-thumbnail"></div>
                                <div><strong>性别:&nbsp; &nbsp; &nbsp; &nbsp;{{$customers->sex}}</strong></div>
                                <div><strong>公司:&nbsp; &nbsp; &nbsp; &nbsp;{{$customers->company}}</strong></div>
                                <div><strong>电话:&nbsp; &nbsp; &nbsp; &nbsp;{{$customers->primary_tel}}</strong></div>
                                <div><strong>邮件:&nbsp; &nbsp; &nbsp; &nbsp;{{$customers->email}}</strong></div>
                                <div><strong>通讯地址：&nbsp; &nbsp; &nbsp; &nbsp;{{$customers->address}}</strong></div>
                                <div><strong>公司类型：&nbsp; &nbsp; &nbsp; &nbsp;{{$customers->company_type}}</strong></div>
                            </ul>
                        </div>
                    </div>
                <div class="am-g task">
                    <div class="am-u-md-6">
                        <div class="am-panel am-panel-default">
                            <div class="am-panel-hd am-cf" data-am-collapse="{target: '#collapse-panel-2'}">未任务 task<span class="am-icon-chevron-down am-fr"></span></div>
                            <div id="collapse-panel-2" class="am-panel-bd am-collapse am-in">
                                <ul class="am-list admin-content-task">
                                    @if (!$task_no->isEmpty())
                                    @foreach($task_no as $t)
                                    <li>
                                        <div class="admin-task-meta"> 创建于{{$t->created_at}}</div>
                                        <div class="admin-task-bd">
                                            {{$t->title}}
                                            <input name="ok" type="hidden" value="{{$t->ok}}"/>

                                        </div>
                                        <div class="am-cf">
                                            <div class="am-btn-toolbar am-fl">
                                                <div class="am-btn-group am-btn-group-xs">
                                                    <button type="button" class="am-btn am-btn-default"  data-id="{{$t->id}}"><span class="am-icon-check"></span></button>

                                                    <button
                                                            type="button"
                                                            class="am-btn am-btn-default"
                                                            data-am-modal="{target: '#doc-modal-{{$t->id}}', closeViaDimmer: 0, width: 400, height: 300}">
                                                        <span class="am-icon-pencil">
                                                    </button>

                                                    <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-{{$t->id}}">
                                                        <div class="am-modal-dialog">
                                                            <div class="am-modal-hd">编辑任务
                                                                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                                                            </div>
                                                            <div class="am-modal-bd" >
                                                                <form class="edit">
                                                                    <input type="hidden" value="{{$t->id}}" name="id">
                                                                    <div class="add"><p class="">标题</p><input type="text" class="am-modal-prompt-input " name="title" value="{{$t->title}}"/></div>
                                                                    <div class="add"><p class="">描述</p><input type="text" class="am-modal-prompt-input " name="description" value="{{$t->description}}"/></div>

                                                                    <div class="show">
                                                                        <div class="am-radio">
                                                                            <label>
                                                                                <input type="radio" name="ok" value="0" >
                                                                                已完成
                                                                            </label>
                                                                        </div>

                                                                        <div class="am-radio">
                                                                            <label>
                                                                                <input type="radio" name="ok" value="1" checked>
                                                                                未完成
                                                                            </label>
                                                                        </div>
                                                                    </div>

                                                                        <button type="submit" class="am-btn am-btn-default am-round edit_b" >提交</button>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <button type="button" class="am-btn am-btn-default"><span class="am-icon-times"></span></button>
                                                </div>
                                            </div>

                                        </div>
                                    </li>
                                    @endforeach
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="am-u-md-6">
                        <div class="am-panel am-panel-default">
                            <div class="am-panel-hd am-cf" data-am-collapse="{target: '#collapse-panel-4'}">已完成任务 task<span class="am-icon-chevron-down am-fr"></span></div>
                            <div id="collapse-panel-4" class="am-panel-bd am-collapse am-in">
                                <ul class="am-list admin-content-task">
                                    @if (!$task_yes->isEmpty())
                                    @foreach($task_yes as $ty)
                                        <li>
                                            <div class="admin-task-meta"> 创建于{{$ty->created_at}}</div>
                                            <div class="admin-task-bd">
                                                {{$ty->title}}
                                                <input name="ok" type="hidden" value="{{$ty->ok}}"/>
                                            </div>
                                            <div class="am-cf">
                                                <div class="am-btn-toolbar am-fl">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button
                                                                type="button"
                                                                class="am-btn am-btn-default"
                                                                data-am-modal="{target: '#doc-modal-{{$ty->id}}', closeViaDimmer: 0, width: 400, height: 300}">
                                                        <span class="am-icon-pencil">
                                                        </button>

                                                        <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-{{$ty->id}}">
                                                            <div class="am-modal-dialog">
                                                                <div class="am-modal-hd">编辑任务
                                                                    <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                                                                </div>
                                                                <div class="am-modal-bd">
                                                                    <form class="edit_1">
                                                                        {!! csrf_field() !!}
                                                                        <div class="add"><p class="">标题</p><input type="text" class="am-modal-prompt-input " name="title" value="{{$ty->title}}"/></div>
                                                                        <div class="add"><p class="">描述</p><input type="text" class="am-modal-prompt-input " name="description" value="{{$ty->description}}"/></div>
                                                                        <input type="hidden"  name="id" value="{{$ty->id}}"/>
                                                                        <div class="show">
                                                                            <div class="am-radio">
                                                                                <label>
                                                                                    <input type="radio" name="ok" value="0" checked >
                                                                                    已完成
                                                                                </label>
                                                                            </div>

                                                                            <div class="am-radio">
                                                                                <label>
                                                                                    <input type="radio" name="ok" value="1" >
                                                                                    未完成
                                                                                </label>
                                                                            </div>
                                                                        </div>

                                                                        <button type="submit" class="am-btn am-btn-default am-round edit_b1" >提交</button>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <button type="button" class="am-btn am-btn-default"><span class="am-icon-times"></span></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    @endforeach
                                        @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
        <script type="application/javascript">

            //新增任务
            $('.doc-prompt-toggle').on('click', function() {
                $('.my-prompt').modal({
                    onConfirm: function(data) {
                        var data = $(".add_task").serialize();
                        //console.log(data);
                        $.ajax({
                            type: "POST",
                            url: "/admin/customer/add_task",
                            data: data,
                            success:function () {
                                location.href=location.href;
                            }
                        })
                    },
                    onCancel: function() {
                        alert('确认取消新增任务吗？');
                    }
                });
            });

            //是否完成
            $('.am-icon-check').click(function () {
                //console.log(show);

                var id = $(this).parent().data('id');
                //alert(id);
                var data ={
                    id:id,
                    ok:0,
                };
                //alert(data);
                $.ajax({
                    //alert(123);
                    type: "POST",
                    url: "/admin/customer/ok",
                    data: data,
                    //alert(123);

                    success:function () {
                        location.href=location.href;
                    }

                });
            });

            //编辑任务
            $('.edit_b').click(function () {
                var data = $(".edit").serialize();
                console.log(data);
                        $.ajax({
                            type: "POST",
                            url: "/admin/customer/edit_task",
                            data: data,


                        });
                return false;
            });

            //编辑任务2
            $('.edit_b1').click(function () {
                var data = $(".edit_1").serialize();
                //console.log(data);
                $.ajax({
                    type: "POST",
                    url: "/admin/customer/edit_task",
                    data: data,
                    /*
                     success:function () {
                     location.href=location.href;
                     }
                     */
                })
            });

        </script>
@endsection